@CHARSET "UTF-8";

/* 全局变量定义 */
:root {
    --primary-color: #1a73e8;       /* 主色 - 天蓝色 */
    --secondary-color: #2563eb;     /* 次色 - 深海蓝 */
    --hover-color: #1d4ed8;         /* 悬停色 */
    --white-opacity: rgba(255, 255, 255, 0.92);
    --shadow-depth: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --border-radius: 24px;
    --blur-value: 16px;
}

/* 全局样式增强 */
body {
    min-height: 100vh;
    background: url('../image/丛雨.jpg') fixed no-repeat center/cover;
    margin: 0;
    font-family: 'Noto Sans SC', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f9ff; /* 背景色增强兼容性 */
    overflow-x: hidden;
}

/* 主容器优化 */
.main-container {
    max-width: 520px;
    padding: 8rem 4rem; /* 增大上下内边距 */
    background: var(--white-opacity);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-depth);
    backdrop-filter: blur(var(--blur-value)) saturate(180%);
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease; /* 新增容器悬停动画 */
}

.main-container:hover {
    transform: translateY(-8px);
}

/* 标题区域美化 */
.text-center {
    margin-bottom: 12rem; /* 增大标题与按钮间距 */
}

.text-4xl {
    font-size: 2.875rem; /* 增大标题字体 */
    color: var(--primary-color);
    text-align: center;
    position: relative;
    margin-bottom: 1.5rem;
}

.text-4xl::after {
    /* 标题底部装饰线 */
    content: "";
    display: block;
    width: 6rem;
    height: 4px;
    background: linear-gradient(to right, #1a73e8, #2563eb);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.text-gray-600 {
    color: #4b5563;
    font-size: 1.125rem;
    font-weight: 500;
}

/* 按钮容器优化 */
.grid-cols-1 md\:grid-cols-2 {
    gap: 3rem; /* 增大按钮间距 */
}

/* 自定义按钮样式 */
.custom-btn {
    padding: 1.5rem 3rem; /* 增大按钮尺寸 */
    border-radius: var(--border-radius);
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* 增大图标与文字间距 */
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -2px rgba(59, 130, 246, 0.1);
}

/* 注册按钮 */
.register-btn {
    background: linear-gradient(135deg, #1a73e8, #2563eb); /* 渐变背景 */
    color: white;
}

.register-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb); /* 悬停加深渐变 */
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -4px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

/* 登录按钮 */
.login-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* 不同渐变区分功能 */
    color: white;
}

.login-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1a73e8);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2), 0 4px 6px -4px rgba(16, 185, 129, 0.1);
    transform: translateY(-2px);
}

/* 图标优化 */
.h-5.w-5 {
    width: 24px; /* 增大图标尺寸 */
    height: 24px;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .main-container {
        padding: 6rem 2rem;
        max-width: 90%;
    }

    .text-4xl {
        font-size: 2.25rem;
    }

    .custom-btn {
        padding: 1.25rem 2.5rem;
        font-size: 1.125rem;
    }
}

/* 新增背景动态效果 */
.main-container::before {
    /* 半透明动态背景 */
    content: "";
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at 20% 30%, #e0f2fe 20%, transparent 80%),
                radial-gradient(circle at 80% 70%, #cffafe 20%, transparent 80%);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.8;
    transition: opacity 0.5s ease;
}